<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统架构师考试备考助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部功能区 -->
        <header class="top-header">
            <div class="countdown">
                <i class="fas fa-clock"></i>
                <span>距离考试还有 <strong id="days-count">120</strong> 天</span>
            </div>
            <div class="daily-question">
                <button id="daily-question-btn">
                    <i class="fas fa-book-open"></i>
                    每日十题
                </button>
            </div>
        </header>

        <!-- 核心功能入口 -->
        <section class="main-features">
            <div class="feature-card" id="real-exam">
                <i class="fas fa-file-alt"></i>
                <h3>真题演练</h3>
                <p>历年真题解析</p>
            </div>
            <div class="feature-card" id="topic-practice">
                <i class="fas fa-layer-group"></i>
                <h3>专题突破</h3>
                <p>分类专题训练</p>
            </div>
            <div class="feature-card" id="essay-guide">
                <i class="fas fa-pen-fancy"></i>
                <h3>论文指导</h3>
                <p>范文与写作技巧</p>
            </div>
            <div class="feature-card" id="wrong-questions">
                <i class="fas fa-exclamation-circle"></i>
                <h3>错题集</h3>
                <p>错题收集与分析</p>
            </div>
            <div class="feature-card" id="core-knowledge">
                <i class="fas fa-brain"></i>
                <h3>核心知识</h3>
                <p>重点知识点总结</p>
            </div>
            <div class="feature-card" id="memory-curve">
                <i class="fas fa-chart-line"></i>
                <h3>记忆曲线</h3>
                <p>科学记忆复习</p>
            </div>
        </section>

        <!-- 底部状态栏 -->
        <footer class="bottom-status">
            <div class="progress-container">
                <span>今日学习进度</span>
                <div class="progress-bar">
                    <div class="progress" style="width: 65%;">65%</div>
                </div>
            </div>
            <div class="question-count">
                <i class="fas fa-check-circle"></i>
                <span>累计做题: <strong>1,280</strong> 题</span>
            </div>
        </footer>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <a href="index.html" class="active">
                <i class="fas fa-home"></i>
                <span>学习</span>
            </a>
            <a href="profile.html">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <!-- 每日十题弹窗 -->
    <div class="modal" id="question-modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>每日十题</h2>
            <div class="question-counter">
                <span id="current-question">1</span> / <span id="total-questions">10</span>
            </div>
            <div class="question">
                <p>在软件架构设计中，以下哪种模式最适合处理对象状态变化的场景？</p>
                <div class="options">
                    <div class="option"><input type="radio" name="answer" id="opt1"><label for="opt1">A. 工厂模式</label></div>
                    <div class="option"><input type="radio" name="answer" id="opt2"><label for="opt2">B. 观察者模式</label></div>
                    <div class="option"><input type="radio" name="answer" id="opt3"><label for="opt3">C. 状态模式</label></div>
                    <div class="option"><input type="radio" name="answer" id="opt4"><label for="opt4">D. 适配器模式</label></div>
                </div>
                <div class="question-actions">
                    <button class="submit-btn">提交答案</button>
                    <button class="next-btn hidden">下一题</button>
                </div>
                <div class="answer-explanation hidden">
                    <h4>正确答案: C</h4>
                    <p>状态模式允许对象在内部状态改变时改变它的行为。这种模式将状态封装成独立的类，并将请求委托给当前的状态对象，从而使得对象的行为随着内部状态的改变而改变。</p>
                </div>
            </div>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html> 